import React, { useState, useEffect } from "react";
import { connect } from 'umi';
import { Radio, Row, Col, Space, Button, Spin } from 'antd';
import LiveAnalysis from "./components/LiveAnalysis";
import PayAnalysis from "./components/PayAnalysis";
import './index.less'
const Analysis = (props) => {
  const { detail = {}, dispatch, loading } = props
  const [liveDataObj, setLiveData] = useState({})
  const { id } = detail

  const [type, setType] = useState('liveAnalysis');

  const onChange = (e) => {
    setType(() => {
      return e.target.value;
    });
  };
  useEffect(() => {
    if (id) {
      fetchLiveData()
    }
  }, [id])
  const fetchLiveData = () => {
    dispatch({
      type: 'liveStreaming/fetchLiveData',
      payload: {
        goodsId: id,
        goodsType: 'directLive'
      },
      callback: (e) => {
        setLiveData(e)
      }
    })
  }

  const render = {
    liveAnalysis: <LiveAnalysis liveDataObj={liveDataObj} id={id}></LiveAnalysis>,
    payAnalysis: <PayAnalysis id={id}></PayAnalysis>
  }[type]
  return (
    <Spin size={'large'} spinning={loading} >
      <Row className="Analysis_box" gutter={[18, 18]}>
        <Col span={24}>
          <Space> <Radio.Group
            value={type}
            onChange={onChange}
          >
            <Radio.Button value="liveAnalysis">直播数据</Radio.Button>
            {/* <Radio.Button value="payAnalysis">交易数据</Radio.Button> */}
          </Radio.Group>
            <Button type="link" onClick={() => { fetchLiveData() }}>刷新</Button>
          </Space>
        </Col>
        {render}
      </Row >
    </Spin>

  )
}
export default connect(({ loading }) => ({
  loading: loading.effects['liveStreaming/fetchLiveData']
}))(Analysis);;

